<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="储存方式">
        <el-radio-group v-model="form.upload_type">
          <el-radio label="local">本地</el-radio>
          <el-radio label="oss">oss</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.upload_type == 'oss'" label="oss的域名">
        <el-input type="input" rows="3" v-model="form.oss_domain" placeholder="oss的域名"/>
      </el-form-item>

      <el-form-item>
        <upload-chunk :file-size="1" @uploaded="afterUpload" ></upload-chunk>
        {{ file_url }}
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from '@/api/member'

import UploadChunk from '@/components/UploadFile/UploadChunk.vue'

export default {
  components: {
    UploadChunk
  },
  data() {
    return {

      file_url: '',

      form: {
        upload_type : 'local',
        oss_domain : ''

      }
    }
  },

  mounted() {
    if (this.$route.query.hasOwnProperty('id')) {
      this.getData(this.$route.query.id)
    }
  },

  methods: {

    getData(id) {
      api.info({ id: id }).then((res) => {
        this.form = res.data
      })
    },

    afterUpload(url) {
      this.file_url = url
    },

    onSubmit() {
      console.log(this.form)
        api.save(this.form).then((res) => {
        this.$message({
          type: 'success',
          message: res.msg
        })

      }).catch((error) => {

      })
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}

.editor-content {
  margin-top: 20px;
}

.article-textarea ::v-deep {

  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }

}
</style>

